<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="16">
            <a-form-item
              label="热搜名称">
              <a-input
                v-model="queryParam.hotTitle"
                placeholder="请输入热搜名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      size="default"
      ref="table"
      rowKey="key"
      :columns="columns"
      :loading="loading"
      :data="loadData"
      :pagination="false"
      showPagination="auto"
    >
      <span slot="hotWbType" slot-scope="text">
        <a-tag :color="text | typeColorFilter">
          {{text | typeFilter}}
        </a-tag>
      </span>
      <span slot="hotWbUrl" slot-scope="text">
          <a :href="text">{{ "点此跳转" }}</a>
      </span>
    </s-table>
  </a-card>
</template>

<script>
  import { STable } from '@/components'
  import { queryWb } from '@/api/hot/wb'
  // 用于处理过滤器动态获取数据
  let that

  export default {
    name: 'KnowHot',
    components: {
      STable
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        // beginTime: null,
        // endTime: null,
        data: [],
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        loading: false,
        // 查询参数
        queryParam: {},
        // 需要的数据
        roles: [],
        ports: [],
        // 表头
        columns: [
          {
            title: '热搜标题',
            dataIndex: 'hotWbName',
            key: 'hotWbName',
            align: 'center',
            sorter: false
          },
          {
            title: '热搜类型',
            dataIndex: 'hotWbType',
            key: 'hotWbType',
            align: 'center',
            scopedSlots: { customRender: 'hotWbType' },
            ellipsis: true,
            sorter: true
          },
          {
            title: '热搜链接',
            dataIndex: 'hotWbUrl',
            key: 'hotWbUrl',
            align: 'center',
            scopedSlots: { customRender: 'hotWbUrl' },
            ellipsis: true,
            sorter: false
          }
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   width: '150px',
          //   align: 'center',
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return queryWb(Object.assign(parameter, queryJson))
            .then(res => {
              console.log(res)
              console.log(res.result)
              this.loading = false
              return res.result
            })
        },
        optionAlertShow: false
      }
    },
    filters: {
      numberColorFilter (value) {
        return 'blue'
      },
      typeColorFilter (value) {
        console.log(value)
        if (value === null || value === undefined || value === '') {
          return 'gray'
        } if (value.indexOf('沸') !== -1) {
          return 'red'
        } else if (value.indexOf('热') !== -1) {
          return 'red'
        } else if (value.indexOf('新') !== -1) {
          return 'green'
        } else if (value.indexOf('无') !== -1) {
          return 'gray'
        }
      },
      typeFilter (value) {
        if (value === null || value === undefined || value === '') {
          return '无'
        } else {
          return value
        }
      },
      roleTextFilter (roleId) {
        let roleName = ''
        for (const role of that.roles) {
          if (parseInt(role.id) === parseInt(roleId)) {
            roleName = role.name
            break
          }
        }
        return roleName
      },
      dateTextFilter (departureTime) {
        if (departureTime === null) {
          return '-'
        }
        return departureTime
      },
      statusFilter (key) {
        return key
      },
      numberFilter (key) {
        return key
      }
    },
    beforeCreate () {
      that = this
    },
    methods: {
      handleOk (res) {
        this.data = res
        this.$refs.table.refresh(false)
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      reset () {
        this.queryParam = {}
      }
    }
  }
</script>
